<template>
  <!-- 可视化实体查看 -->
  <div class="entity-view-component">
    <navMenu @selectValue="selectValue" :activeIndex="tabs"></navMenu>
    <!-- <section class="view-detail" v-if="tabs==='detail'&& relationId"> -->
    <section
      class="view-detail"
      v-if="tabs === 'detail' && kgEntityRelationSpoId"
    >
      <div class="node-edit self-scroll">
        <el-form
          :model="edgeData"
          ref="nodeForm"
          :rules="rules"
          hide-required-asterisk
        >
          <el-form-item
            label="关系名称："
            prop="name"
            class="node-form node-form-name"
          >
            <!-- <el-input v-model.trim="relationPro.edge" :readonly="isView" class="default-name" clearable></el-input> -->
            <el-autocomplete
              class="inline-input default-name"
              :class="{ 'edit-status': isView }"
              v-model="relationPro.edge"
              value-key="relationName"
              :readonly="isView"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="关系详情：" class="node-form">
            <div class="relation-box">
              <el-input
                v-model.trim="relationPro.head"
                :readonly="true"
                class="default-name"
                v-if="relationPro.sourceEntityStatus != '1'"
                :class="{ 'edit-status': isView }"
                size="small"
              ></el-input>
              <img
                :src="relationPro.head"
                style="width: 40px; height: 40px"
                v-if="relationPro.sourceEntityStatus == '1'"
              />
              <div class="arrow">
                <i class="el-icon-back" v-if="direction === 'two-way'"></i>
                <i v-else>-</i>
              </div>
              <el-input
                v-model.trim="relationPro.edge"
                :readonly="true"
                class="default-name"
                :class="{ 'edit-status': isView }"
                size="small"
              ></el-input>

              <div class="arrow">
                <i class="el-icon-right"></i>
              </div>
              <el-input
                v-model.trim="relationPro.tail"
                v-if="relationPro.tailEntityStatus != '1'"
                :readonly="true"
                class="default-name"
                :class="{ 'edit-status': isView }"
                size="small"
              ></el-input>
              <img
                :src="relationPro.tail"
                style="width: 40px; height: 40px"
                v-if="relationPro.tailEntityStatus == '1'"
              />
            </div>
          </el-form-item>
          <el-form-item
            label="  置信度："
            class="node-form confidence"
            style="margin-left: 14px"
          >
            <el-input
              v-model.trim="relationPro.confidence"
              :readonly="isView"
              class="default-name"
              :class="{ 'edit-status': isView }"
              @input="formatCheck"
              size="small"
            >
              <!-- <i slot="suffix" style="vertical-align: sub">%</i> -->
            </el-input>
          </el-form-item>
        </el-form>
        <div class="property-box">
          <div class="property-header">
            <span class="title">属性信息:</span>
            <div
              style="color: #4b71eb; cursor: context-menu"
              @click="openDialog"
              v-if="!isView"
            >
              <i
                class="el-icon-plus"
                style="font-size: 12px; margin-right: 6px"
              ></i
              ><i>新增</i>
            </div>
          </div>
          <el-table
            :data="tableList"
            border
            class="table"
            :header-cell-style="{
              background: 'rgba(61, 96, 212, 0.12)',
              height: '36px',
            }"
          >
            <el-table-column
              label="序号"
              width="50"
              align="center"
              fixed="left"
            >
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="propertyName"
              label="属性"
              align="center"
            ></el-table-column>
            <el-table-column prop="propertyValue" label="属性值" align="center">
              <template slot-scope="scope">
                <img
                  style="height: 40px"
                  v-if="scope.row.propertyType == 'image'"
                  :src="scope.row.propertyValue"
                />
                <span v-else>{{ scope.row.propertyValue }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="80"
              v-if="!isView"
            >
              <template slot-scope="scope">
                <div>
                  <i
                    class="el-icon-edit"
                    @click="nodeEditScope(scope.row, scope.$index)"
                    style="margin-right: 16px"
                  ></i>
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="deleteConfirm(scope.row, scope.$index)"
                    @cancel="deleteCancel"
                  >
                    <!-- v-if="scope.row.isPrivate == '1'" -->
                    <i class="el-icon-delete" slot="reference"></i>
                  </el-popconfirm>
                  <!-- <i v-else style="width: 14px; display: inline-block"></i> -->
                  <!--TODO: 解决表格不同行按钮对不齐问题 -->
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="source_all" v-if="relationId">
            <div class="source">
              <div class="source_title">关系溯源</div>
              <div class="source_num">来源数量:{{ relationSourceSize }}</div>
            </div>
            <!-- <div class="source_body" v-for="(item, index) in relationSourceList" :key="index"> -->
            <div
              class="source"
              v-for="(item, index) in relationSourceList"
              :key="index"
            >
              <!-- <div class="top_section">
                                <div class="file_name">{{index + 1}}. {{item.fileName}}</div>
                                <div class="operation">
                                    <el-link icon="el-icon-download" :underline="false" type="primary" class="download"
                                        :href="'//' + item.fileUrl" :download="item.fileName">下载</el-link>
                                    <el-link icon="el-icon-delete" :underline="false" type="primary" class="download"
                                        @click="deleteSource(item.fileId)" :download="item.fileName">删除</el-link>
                                </div>
                            </div>
                            <div class="bottom_section">
                                <div>作者：{{}}</div>
                                <div>时间：{{}}</div>
                                <div>大小：{{}}</div>
                            </div> -->
              <div class="file_name">{{ index + 1 }}. {{ item.fileName }}</div>
              <div class="operation">
                <el-link
                  icon="el-icon-download"
                  :underline="false"
                  type="primary"
                  class="download"
                  :href="'//' + item.fileUrl"
                  :download="item.fileName"
                  >下载</el-link
                >
                <!-- <el-link icon="el-icon-delete" :underline="false" type="primary" class="download"
                                    @click="deleteSource(item.fileId)" :download="item.fileName">删除</el-link> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn btn-edit" @click="editEntity" v-if="isView">编辑</div>
      <div class="btn" @click="saveEntitythrottle" v-else>保存</div>
    </section>
    <!-- <section class="view-detail" v-if="tabs==='detail'&& !relationId"> -->
    <section
      class="view-detail"
      v-if="tabs === 'detail' && !kgEntityRelationSpoId"
    >
      <div class="node-edit self-scroll">
        <el-form
          :model="edgeData"
          ref="nodeForm"
          :rules="rules"
          hide-required-asterisk
        >
          <el-form-item
            label="关系名称："
            prop="name"
            class="node-form node-form-name"
          >
            <el-select
              class="inline-input"
              ref="relationInput"
              v-model="relationPro.edge"
              filterable
              allow-create
              default-first-option
              value-key="relationName"
              reserve-keyword
              placeholder="请输入内容"
              @change="edgeSelete"
              @select="edgeSelete1"
              :loading="loading"
            >
              <el-option
                v-for="item in relationCon"
                :key="item.relationName"
                :label="item.relationName"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关系详情：" class="node-form">
            <div class="relation-box">
              <el-input
                v-model.trim="relationPro.head"
                class="default-name"
                size="small"
                v-if="relationPro.sourceStatus != '1'"
                :readonly="true"
              ></el-input>
              <img
                :src="relationPro.head"
                style="width: 40px; height: 40px"
                v-if="relationPro.sourceStatus == '1'"
              />
              <div class="arrow">
                <i class="el-icon-back" v-if="direction === 'two-way'"></i>
                <i v-else>-</i>
              </div>
              <el-input
                v-model.trim="relationPro.edge"
                :readonly="true"
                class="default-name"
                size="small"
              ></el-input>
              <div class="arrow">
                <i class="el-icon-right"></i>
              </div>
              <el-input
                v-model.trim="relationPro.tail"
                :readonly="true"
                class="default-name"
                size="small"
                v-if="relationPro.targetStatus != '1'"
              ></el-input>
              <img
                :src="relationPro.tail"
                style="width: 40px; height: 40px"
                v-if="relationPro.targetStatus == '1'"
              />
            </div>
          </el-form-item>
          <el-form-item
            label="  置信度："
            class="node-form confidence"
            :readonly="addIsEdit"
            style="margin-left: 14px"
          >
            <el-input
              v-model.trim="relationPro.confidence"
              class="default-name"
              size="small"
            >
              <i slot="suffix" style="vertical-align: sub">%</i>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="property-box">
          <div class="property-header">
            <span class="title">属性信息:</span>
            <div
              style="color: #4b71eb; cursor: context-menu"
              @click="openDialog"
            >
              <i
                class="el-icon-plus"
                style="font-size: 12px; margin-right: 6px"
              ></i
              ><i>新增</i>
            </div>
          </div>
          <el-table
            :data="tableList"
            border
            class="table"
            :header-cell-style="{ background: 'rgba(61, 96, 212, 0.12)' }"
          >
            <el-table-column
              label="序号"
              width="50"
              align="center"
              fixed="left"
            >
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="propertyName"
              label="属性"
              align="center"
            ></el-table-column>
            <el-table-column prop="propertyValue" label="属性值" align="center">
              <template slot-scope="scope">
                <img
                  style="height: 40px"
                  v-if="scope.row.propertyType == 'image'"
                  :src="scope.row.propertyValue"
                />
                <span v-else>{{ scope.row.propertyValue }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <div>
                  <i
                    class="el-icon-edit"
                    @click="nodeEditScope(scope.row, scope.$index)"
                    style="margin-right: 16px"
                  ></i>
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="deleteConfirm(scope.row, scope.$index)"
                    @cancel="deleteCancel"
                  >
                    <!-- v-if="scope.row.isPrivate == '1'" -->
                    <i class="el-icon-delete" slot="reference"></i>
                  </el-popconfirm>
                  <!-- <i v-else style="width: 14px; display: inline-block"></i> -->
                  <!--TODO: 解决表格不同行按钮对不齐问题 -->
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="source_all" v-if="relationId">
            <div class="source">
              <div class="source_title">关系溯源</div>
              <div class="source_num">来源数量:{{ relationSourceSize }}</div>
            </div>
            <div
              class="source"
              v-for="(item, index) in relationSourceList"
              :key="index"
            >
              <div>{{ item.fileName }}</div>
              <el-link
                :underline="false"
                type="primary"
                class="download"
                :href="'//' + item.fileUrl"
                :download="item.fileName"
                >下载</el-link
              >
            </div>
          </div>
        </div>
      </div>
      <div class="handle" style="display: flex">
        <div
          class="btn btn-edit"
          @click="cancelNew"
          style="margin-right: 0; flex: 1"
        >
          取消
        </div>
        <div class="btn" @click="saveEntitythrottle" style="flex: 2">保存</div>
      </div>
    </section>
    <section class="view-select" v-if="tabs === 'select'">
      <select-com :projectId="projectId" :Neo4j="Neo4j"></select-com>
    </section>
    <section class="view-config" v-show="tabs === 'config'">
      <graph-config
        @changeGraphConfig="changeGraphConfig"
        @saveConfig="saveConfig"
        ref="graphConfig"
        @changePropertyColor="changePropertyColor"
        @changePropertyStyle="changePropertyStyle"
      ></graph-config>
    </section>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="afterDialogClose"
      class="common-dialog map-dialog"
      :append-to-body="true"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="property"
        :rules="propertyRules"
        ref="dialogForm"
        label-position="right"
      >
        <el-form-item
          label="属性名:"
          prop="propertyName"
          class="dialog-inline"
          :rules="{
            required: true,
            message: '请输入属性名',
            trigger: 'change',
          }"
        >
          <el-input
            style="width: 80%"
            v-model.trim="property.propertyName"
            :disabled="editIsproperty"
            @input="changePropVal"
          ></el-input>
          <span
            style="margin-left: 20px; cursor: pointer; color: #6f8def"
            @click="bindRelationProp"
            >去选择</span
          >
        </el-form-item>
        <el-form-item
          label="属性值类型:"
          prop="propertyType"
          class="dialog-inline"
          v-if="isEditName"
          :rules="{
            required: true,
            validator: validateType,
            trigger: 'change',
          }"
        >
          <el-select
            v-model="property.propertyType"
            @change="changePropertyType"
            style="width: 80%"
          >
            <el-option
              v-for="item in propertyTypeOptions"
              :key="item.key"
              :value="item.key"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="属性值:"
          prop="propertyValue"
          class="dialog-inline"
          :rules="[
            {
              required: true,
              validator: validatePass,
              trigger: ['change', 'blur'],
            },
          ]"
        >
          <!-- 枚举值类型 -->
          <el-select
            v-if="property.propertyBind == 'enum'"
            v-model="property.propertyValue"
            style="width: 80%"
          >
            <el-option
              v-for="(eItem, index) in property.enumNames"
              :key="index"
              :label="eItem"
              :value="eItem"
            ></el-option>
          </el-select>
          <!-- 非枚举值 -->
          <template v-else>
            <!-- 字符 数字类型 坐标 或没有设置类型 都是input输入框 -->
            <el-input
              style="width: 80%"
              v-if="
                property.propertyType == 'text' ||
                property.propertyType == 'int' ||
                property.propertyType == 'float' ||
                !property.propertyType
              "
              type="input"
              v-model.trim="property.propertyValue"
              placeholder="请输入属性值"
            ></el-input>
            <!-- 日期格式 -->
            <el-date-picker
              style="width: 80%"
              v-if="property.propertyType == 'date'"
              :picker-options="pickerOptions()"
              v-model="property.propertyValue"
              align="right"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
            >
            </el-date-picker>
            <!-- 时间格式 -->
            <el-date-picker
              v-if="property.propertyType == 'datetime'"
              :picker-options="pickerOptions()"
              style="width: 80%"
              v-model="property.propertyValue"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
            >
            </el-date-picker>
            <!-- 坐标 -->
            <span v-if="property.propertyType == 'coordinate'"
              >经度：<el-input
                style="width: 25%; margin-right: 10px"
                v-model="property.coordX"
              ></el-input
              >维度：<el-input
                style="width: 25%"
                v-model="property.coordY"
              ></el-input
            ></span>
            <!-- 图片和文件 -->
            <el-upload
              v-if="
                property.propertyType == 'image' ||
                property.propertyType == 'file'
              "
              class="upload-demo"
              ref="uploadRef"
              :auto-upload="false"
              :show-file-list="false"
              action="#"
              :on-change="handleUploadChang"
              :on-exceed="handleExceed"
            >
              <el-button size="small" type="primary">上传</el-button>
            </el-upload>
            <span
              v-if="
                property.propertyType == 'image' ||
                property.propertyType == 'file'
              "
              >{{ property.fileName }}</span
            >
            <!-- 数组类型 用多选 -->
            <template v-if="property.propertyType == 'array'">
              <el-select
                v-model="property.propertyValue"
                multiple
                filterable
                allow-create
                default-first-option
                class="hide-select"
                popper-class="hide-always"
                placeholder="请输入属性值，回车确认添加一项"
                style="width: 80%"
              ></el-select>
              <el-tooltip content="当前属性为数组类型，输入一项后按回车继续">
                <i
                  class="el-icon-warning"
                  style="margin-left: 5px; font-size: 16px"
                ></i>
              </el-tooltip>
            </template>
          </template>
          <!-- <el-input
          style="width: 80%"
            type="input"
            v-model.trim="property.propertyValue"
          ></el-input> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetDialogForm">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
    <SelectRelationProp
      ref="selectOntologyPropRef"
      @select-property="selectPropertyVal"
    ></SelectRelationProp>
  </div>
</template>

<script>
import { throttle } from "@/plugins/utils/index.js";
import navMenu from "@/views/server/knowledge-management/knowledgeBI/component/navMenu";
import selectCom from "./select/index.vue";
// import configCom from './config/index.vue'
import graphConfig from "@/components/drawerPanel/graphConfig.vue";
// import graphConfig from '@/components/drawerPanel/graphConfigKnowledge.vue'
import { deepClone } from "@/plugins/utils";
import { mapMutations, mapState } from "vuex";
import SelectRelationProp from "@/components/knowledgeManage/SelectRelationProp.vue";

export default {
  components: {
    navMenu,
    selectCom,
    graphConfig,
    SelectRelationProp,
    // configCom
  },
  props: {
    ontologyId: {
      type: String,
      default: "",
    },
    relationId: {
      type: String,
      required: true,
      default: "",
    },
    kgEntityRelationSpoId: {
      type: String,
      required: true,
      default: "",
    },
    relation: {
      type: Object,
      default: () => {
        return {
          head: "fd",
          tail: "fdfdf",
          edge: "辅导辅导",
          confidence: 1,
        };
      },
    },
    projectId: {
      type: String,
      required: true,
      default: "",
    },
    Neo4j: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      propertyColor: "#F4D35E",
      propertyStyle: "15",
      tabs: "detail",
      isView: true, // 查看还是编辑
      edgeData: {
        name: "", // 当前关系name
      },
      title: "新增属性",
      relationPro: {
        head: "",
        tail: "",
        edge: "",
        tailEntityStatus: "",
        sourceEntityStatus: "",
        confidence: 1,
      },
      isEditName: false,
      propertyTypeOptions: [
        { key: "text", label: "字符串" },
        { key: "int", label: "整数值" },
        { key: "float", label: "浮点值" },
        { key: "date", label: "日期" },
        { key: "datetime", label: "日期时间" },
        { key: "coordinate", label: "坐标" },
        { key: "array", label: "数组" },
        { key: "image", label: "图片" },
        { key: "file", label: "文件" },
      ],
      newRelateId: null,
      rules: {},
      propertyRules: {},
      relationDetail: {},
      direction: "one-way", //方向
      // currentType:'detail', // 当前状态
      selfProperty: [], // 自己的属性
      parentProperty: [], // 父节点的属性
      tableList: [], // 包含所有的属性
      parentList: [], // 父节点列表
      dialogFormVisible: false, // 属性dialog
      popoverVisible: false, // 属性删除提示
      property: {
        // 属性
        propertyName: "", // 属性值名
        propertyValue: "", // 属性值类型
        propertyType: "", // 属性值类型
        startRange: "",
        endRange: "",
        coordX: "", //经度
        coordY: "", //维度
      },
      loading: false,
      editPropertyId: null,
      headEntityId: "",
      relationCon: [],
      selectRelationValue: "",
      propertyCon: [],
      selectProperty: [],
      relationSourceSize: 0, //来源数量
      relationSourceList: [],
      addIsEdit: false,
      editIsproperty: false,
      selectEdgeList: [],
    };
  },
  async created() {
    if (this.kgEntityRelationSpoId) {
      await this.listRelationProperty();
      await this.getSourceMap();
    }
  },
  computed: {
    ...mapState({
      // drawerTypeOfEdge: state => state.ontologyModel.drawerTypeOfEdge,
      drawerTypeOfEdge: (state) => state.knowledgeMap.drawerTypeOfEdge,
      currentEdge: (state) => state.ontologyModel.currentEdge,
      // currentEdge: (state) => state.knowledgeMap.currentEdge,
      newEdgeOfG6: (state) => state.knowledgeMap.newEdgeOfG6,
      node_config_data: (state) => state.ontologyModel.node_config_data, // 节点数据
      edge_config_data: (state) => state.ontologyModel.edge_config_data, // 对私有属性 label 去重后的边数据
    }),
    // selectRelationObj() {
    //     let obj = {
    //         relationName: this.relationPro.edge,
    //         relationId: this.relationId
    //     };
    //     if (this.selectRelationValue !== this.relationPro.edge) {
    //         obj.relationId = ''
    //     }
    //     this.relationCon.forEach(item => {
    //         if (item.relationName === this.relationPro.edge) {
    //             Object.assign(obj, item)
    //         }
    //     })
    //     return obj;
    // }
  },
  methods: {
    ...mapMutations({
      change_drawer_type_of_edge: "knowledgeMap/change_drawer_type_of_edge",
      change_current_edge: "knowledgeMap/change_current_edge",
    }),
    // 属性值类型
    validateType(rule, value, callback) {
      if (this.isEditName && !value) {
        callback(new Error("属性值类型不能为空"));
      } else {
        // 校验通过
        callback();
      }
    },
    setPropertyColor(val) {
      this.$refs.graphConfig.propertyColor = val;
      this.propertyColor = val;
    },
    setPropertyStyle(val) {
      this.$refs.graphConfig.propertyStyle = val;
      this.propertyStyle = val;
    },
    changePropertyColor(val) {
      this.$emit("changePropertyColor", val);
      // this.propertyListX.forEach((ens) => {
      //   if (ens.includes("prop")) {
      //     this.graph.updateItem(ens, { style: { fill: val } });
      //   }
      // });
      this.propertyColor = val;
    },
    changePropertyStyle(val) {
      this.$emit("changePropertyStyle", val);
      // this.propertyListX.forEach((ens) => {
      //   if (ens.includes("prop")) {
      //     this.graph.updateItem(ens, { size: val * 2 });
      //   }
      // });
      this.propertyStyle = val;
    },
    saveConfig(eleLoading) {
      let nodes = this.node_config_data.map((node) => {
        let item = {
          id: node.id,
          color: node.color,
        };
        return item;
      });

      let edges = this.edge_config_data.map((edge) => {
        let item = {
          // id: edge.kgEntityRelationSpoId,
          id: edge.relationId,
          color: edge.color,
        };
        return item;
      });
      nodes.shift();
      edges.shift();
      let nodeParams = {
        ontologyAllId: this.ontologyAllId,
        param: nodes,
      };
      let edgeParams = {
        ontologyAllId: this.ontologyAllId,
        param: edges,
        propertyColor: this.propertyColor,
        propertyStyle: this.propertyStyle,
      };
      return Promise.all([
        this.updateNodeColor(nodeParams),
        this.updateEdgeColor(edgeParams),
      ])
        .then((res) => {
          this.$message.success("保存节点和连线颜色成功");
          eleLoading.close();
        })
        .catch((err) => {
          console.error(err);
          eleLoading.close();
        });
    },
    updateNodeColor(params) {
      return this.$axios
        .post(this.$api.knowledgeMap.bathSaveEntityColor, params)
        .then((res) => {
          let code = res.data.code;
          if (code !== 200) {
            let message = res.data.message;
            this.$message.warning(message);
            return false;
          }
        });
    },
    updateEdgeColor(params) {
      return this.$axios
        .post(this.$api.knowledgeMap.bathSaveRelationColor, params)
        .then((res) => {
          let code = res.data.code;
          if (code !== 200) {
            let message = res.data.message;
            this.$message.warning(message);
            return false;
          }
        });
    },
    // 配置
    changeGraphConfig(data) {
      this.$emit("changeGraphConfig", data);
    },
    selectValue(val) {
      this.tabs = val;
    },
    edgeSelete(val) {
      this.newRelateId = val.relationId;
      if (typeof this.relationPro.edge == "object") {
        this.relationPro.edge = this.relationPro.edge.relationName;
      }
      this.tableList = [];
    },
    edgeSelete1(val) {
      // this.getPropertyByRelationId(val.relationId);
    },
    handleSelect() {},
    async listRelationProperty() {
      let params = {
        kgEntityRelationSpoId: this.kgEntityRelationSpoId,
      };
      let res = await this.$axios.get(
        this.$api.knowledgeMap.getRelationPropertyDetail,
        {
          params,
        }
      );
      const { code, data, msg } = res.data;
      if (code == 200) {
        this.tableList = data.respPropertyVoList;
        this.relationPro.head = data.sourceEntityName;
        this.relationPro.tail = data.tailEntityName;
        this.relationPro.edge = data.relationName;
        this.relationPro.confidence = data.confidence;
        this.relationPro.sourceEntityStatus = data.sourceEntityStatus;
        this.relationPro.tailEntityStatus = data.tailEntityStatus;
        this.relationDetail = data;
        this.headEntityId = data.entityId1;
        this.selectRelationValue = data.relationName;
      } else {
        // this.$message.error(msg);
      }
    },

    async getPublicRelationList() {
      const params = {
        sourceOntologyId: arguments[0],
        tailOntologyId: arguments[1],
      };
      let res = await this.$axios.get(
        this.$api.knowledgeMap.getPublicRelationList,
        {
          params,
        }
      );
      const { data, msg, code } = res.data;
      if (code == 200) {
        this.relationCon = data;

        this.selectEdgeList = data;
      } else {
        this.$message.warning(msg);
      }
    },

    async getSourceMap() {
      const params = {
        kgEntityRelationSpoId: this.kgEntityRelationSpoId,
      };
      let res = await this.$axios.get(this.$api.knowledgeMap.getSourceFile, {
        params,
      });
      const { data, msg, code } = res.data;
      if (code == 200) {
        this.relationSourceSize = data.length;
        this.relationSourceList = data;
      } else {
        this.$message.warning(msg);
      }
    },

    async deleteSource(fileId) {
      // await
      const params = {
        fileId,
      };
    },

    async getPropertyByRelationId(id) {
      await this.$axios
        .get(`${this.$api.knowledgeMap.getPropertyByRelationId}/${id}`)
        .then((res) => {
          const { data, code, message } = res.data;
          if (code === 200) {
            this.propertyCon = data;
            this.propertyCon.forEach((item) => {
              // item['propertyValue']= '';
              if (!item.propertyValue) {
                this.$set(item, "propertyValue", "");
              }
              if (!item.isPrivate) {
                item["isPrivate"] = "0";
              }
            });
            this.propertyCon = [].concat(this.propertyCon);
          } else {
            this.$message.warning(message);
          }
        });
    },
    // 新增属性
    openDialog() {
      this.title = "新增属性";
      this.dialogFormVisible = true;
      this.selectProperty = [];
    },
    // 关闭
    afterDialogClose() {
      this.$refs.dialogForm.resetFields();
    },
    // 删除属性
    deleteProperty(row) {
      let id = row.id;
      let delIndex = this.tableList.findIndex((item, index) => {
        return item.id === id;
      });
      if (delIndex > -1) {
        this.tableList.splice(delIndex, 1);
      }
    },
    // 新增/编辑属性
    submitDialogForm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          let middle = Object.assign({}, this.property);
          // 约束类型为数组时 值做JSON处理
          if (
            middle.propertyType === "array" &&
            Array.isArray(middle.propertyValue)
          ) {
            middle.propertyValue = JSON.stringify(middle.propertyValue);
          }
          // 坐标用,拼接
          if (middle.propertyType === "coordinate") {
            middle.propertyValue = middle.coordX + "," + middle.coordY;
          }
          if (this.title == "新增属性") {
            this.tableList.unshift(Object.assign({}, middle));
          } else {
            Object.assign(this.tableList[this.editPropertyId], middle);
          }
          this.property = {
            // 属性
            propertyName: null, // 属性值名
            propertyType: "", // 属性值类型
            enumNames: [],
            startRange: "",
            endRange: "",
            propertyBind: "",
            measureUnit: "",
            measureUnit: "",
            coordX: "", //经度
            coordY: "", //维度
            isPrivate: "1", //"1"表示选择属性 "0"表示输入属性
          };
          this.$refs.dialogForm.resetFields();
          this.dialogFormVisible = false;
          this.editIsproperty = false;
          this.isEditName = false;
        }
      });
      // let addMiddle = Object.assign(
      //   {
      //     propertyId: "",
      //     propertyName: "",
      //     propertyType: "",
      //     propertyValue: "",
      //     isPrivate: "1",
      //   },
      //   this.property
      // );
      // if (
      //   !this.property.propertyName ||
      //   !this.property.propertyValue
      // ) {
      //   this.$message.warning("请填写完整信息");
      //   return;
      // }
      // console.log("property",this.property);
      // if (this.title === "新增属性") {
      //   this.tableList.unshift(addMiddle);
      // } else {
      //   Object.assign(this.tableList[this.editPropertyId], addMiddle);
      // }
      // this.property = {
      //   propertyName: "",
      //   propertyValue: "",
      // };
      // this.$refs.dialogForm.resetFields();
      // this.dialogFormVisible = false;
      // this.editIsproperty = false;
    },
    // 编辑当前属性
    nodeEditScope(val, index) {
      if (val.isPrivate != "1") {
        this.editIsproperty = true;
        this.isEditName = true;
      }
      this.editPropertyId = index;
      this.title = "编辑属性";
      // 如果属性是 array类型 使用JSON转换属性值
      if (val.propertyType === "array") {
        try {
          let tmpVal = JSON.parse(val.propertyValue);
          Object.assign(this.property, val, { propertyValue: tmpVal });
        } catch {
          Object.assign(this.property, val, { propertyValue: [] });
        }
      } else {
        Object.assign(this.property, val);
        if (val.propertyType === "coordinate") {
          this.property.coordX = this.property.propertyValue.split(",")[0];
          this.property.coordY = this.property.propertyValue.split(",")[1];
        }
      }
      this.dialogFormVisible = true;
      // Object.assign(this.property, val);
    },
    cancelDelProperty() {
      this.popoverVisible = false;
    },
    // 确定删除属性
    confirmDelProperty() {
      this.popoverVisible = false;
    },
    resetDialogForm() {
      this.editIsproperty = false;
      this.isEditName = false;
      this.dialogFormVisible = false;
      this.property = {
        propertyName: null, // 属性值名
        propertyValue: null, // 属性值
        propertyType: "", // 属性值类型
        startRange: "",
        endRange: "",
        coordX: "", //经度
        coordY: "", //维度
      };
    },
    nodeDelScope(row) {
      this.deleteProperty(row);
    },
    editEntity() {
      // this.oldOntologySpoId = this.form.ontologyId;
      this.isView = false;
    },
    deleteEntity() {},
    saveEntity() {
      let relationCon = {
        relationId: "",
        relationName: this.relationPro.edge,
      };
      if (this.relationPro.edge == "") {
        this.$message.warning("请填写完整信息！");
        return;
      } else {
        let item = this.relationCon.filter((item) => {
          return item.relationName == this.relationPro.edge;
        });
        if (item.length) {
          Object.assign(relationCon, item[0]);
        }
      }
      if (
        this.relationPro.confidence &&
        !this.validConfidence(this.relationPro.confidence)
      ) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
        return;
      }
      if (this.kgEntityRelationSpoId) {
        let params = {
          // 这里的 relationId 需要改成 kgEntityRelationSpoId
          relationId: relationCon.relationId,
          kgEntityRelationSpoId: this.kgEntityRelationSpoId,
          relationName: this.relationPro.edge,
          confidence: this.relationPro.confidence,
          propertyReqVoList: this.tableList,
        };
        this.$axios
          .post(this.$api.knowledgeMap.updateRelation, params)
          .then((res) => {
            const { data, code, msg } = res.data;
            if (code === 200) {
              this.isView = true;
              this.change_drawer_type_of_edge("detail");
              this.$emit("changeByEdge", data, "edit");
              this.$message.success(msg);
              // this.change_current_edge(data.edge);
              this.listRelationProperty();
            } else {
              // this.$message.error(msg);
            }
          });
      } else {
        let params = {
          projectId: this.$store.state.knowledgeMap.projectMsg.projectId,
          confidence: this.relationPro.confidence,
          relationName: relationCon.relationName,
          propertyReqVoList: this.tableList,
          relationId: relationCon.relationId,
          sourceEntityId: this.$store.state.knowledgeMap.newEdgeOfG6.sourceId,
          tailEntityId: this.$store.state.knowledgeMap.newEdgeOfG6.targetId,
          // kgSpoProperties: this.tableList
        };
        // console.log("params",params);
        // console.log("relationCon",relationCon);
        this.$axios
          .post(this.$api.knowledgeMap.addKgEntityRelation, params)
          .then((res) => {
            const { data, code, msg } = res.data;
            if (code === 200) {
              this.isView = true;
              // console.log('fdfdaaaa', this.$store.state.knowledgeMap.newEdgeOfG6);
              // console.log('fdfdaaaa', data);
              const { id, neo4jId, sourceEntityId, tailEntityId } = data;
              let toData = {
                newEdgeOfG6: this.$store.state.knowledgeMap.newEdgeOfG6,
                reaData: {
                  ...data,
                  id: neo4jId,
                  // source: "" + source,
                  // target: "" + target,
                  source: sourceEntityId,
                  target: tailEntityId,
                  kgEntityRelationSpoId: id,
                },
              };
              this.$emit("changeByEdge", toData, "add");
              this.$message.success(msg);
              this.change_current_edge(data);
              this.change_drawer_type_of_edge("detail");
              // this.change_drawer_type_of_edge('add');
              this.$emit("addNewRelation", data.id);
            } else {
              // this.$message.error(msg);
            }
          });
      }
    },
    // 创建两个节点的边
    createEdge() {
      let { edgeId, sourceId, targetId } = this.newEdgeOfG6;
      console.log(
        "%c [ this.newEdgeOfG6 ]-1121",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.newEdgeOfG6
      );
      let params = {
        relationId: this.relationPro.edge.relationId,
        entityId1: this.$store.state.knowledgeMap.newEdgeOfG6.sourceId,
        entityId2: this.$store.state.knowledgeMap.newEdgeOfG6.targetId,
        relationName: "未命名",
        ontologyId: this.ontologyId,
        details: "",
        confidence: this.relationPro.confidence,
        projectId: this.$store.state.knowledgeMap.projectMsg.projectId,
        kgSpoProperties: this.tableList,
      };
      return this.$axios
        .post(this.$api.knowledgeMap.addRelation, params)
        .then((res) => {
          let code = res.data.code;
          if (+code !== 200) {
            let message = res.data.message;
            this.$message.warning(message);
            return false;
          } else {
            this.$message.success("保存成功");
            let data = res.data.data;
            this.$emit("changeByEdge", data, "add");
            this.change_current_edge(data);
            this.change_drawer_type_of_edge("edit");
            return data;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    saveEntitythrottle() {
      this.Throttle(this);
    },
    cancelNew() {
      this.$emit("cancelNew");
    },
    Throttle: throttle((_this) => _this.saveEntity(), 300),
    // 检验输入数据是否是数字
    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg =
        /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    deleteConfirm(val, index) {
      if (val.isPrivate == "1") {
        this.$message.warning("公有属性不可删除！");
        return;
      }
      this.tableList.splice(index, 1);
    },
    deleteCancel() {},
    querySearch(queryString, cb) {
      var restaurants = this.relationCon;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.relationName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) >= 0
        );
      };
    },
    bindRelationProp() {
      this.$refs.selectOntologyPropRef.show(
        this.relationId ? this.relationId : this.newRelateId
      );
    },
    selectPropertyVal(val) {
      console.log("selectVal", val);
      this.property = val;
      this.$nextTick(() => {
        this.$refs.dialogForm.clearValidate("propertyValue");
      });
    },
    // 修改属性名 应取消属性值组件的绑定约束
    changePropVal() {
      this.isEditName = true;
      if (this.property.propertyType) {
        for (let k in this.property) {
          if (!["propertyName", "propertyValue"].includes(k)) {
            delete this.property[k];
          }
        }
      }
    },
    validatePass(rule, value, callback) {
      if (
        this.property.propertyType &&
        this.property.propertyType == "coordinate"
      ) {
        // 属性值类型为坐标
        if (!this.property.coordX || !this.property.coordY) {
          callback(new Error("属性值不能为空"));
        } else {
          callback();
        }
      } else {
        if (value == "" || value == null) {
          callback(new Error("属性值不能为空"));
        } else {
          if (this.property.propertyType) {
            if (this.property.propertyBind == "no_bind") {
              callback();
            }
            if (this.property.propertyBind == "enum") {
              callback();
            }
            if (this.property.propertyBind == "range") {
              // 数字范围值 需要转换为number比较
              if (["int", "float"].includes(this.property.propertyType)) {
                if (
                  parseFloat(value) < parseFloat(this.property.startRange) ||
                  parseFloat(value) > parseFloat(this.property.endRange)
                ) {
                  callback(
                    new Error(
                      `属性值应在${this.property.startRange}~${this.property.endRange}之间`
                    )
                  );
                } else {
                  callback();
                }
              } else {
                if (
                  value < this.property.startRange ||
                  value > this.property.endRange
                ) {
                  callback(
                    new Error(
                      `属性值应在${this.property.startRange}~${this.property.endRange}之间`
                    )
                  );
                } else {
                  callback();
                }
              }
            }
            if (!this.property.propertyBind) {
              // 不要限制
              callback();
            }
          } else {
            callback();
          }
        }
      }
    },
    pickerOptions() {
      const { startRange, endRange } = this.property;
      return {
        disabledDate: (time) => {
          if (endRange && endRange != "" && startRange && startRange != "") {
            return (
              time.getTime() > new Date(endRange).getTime() ||
              time.getTime() < new Date(startRange).getTime()
            );
          }
        },
      };
    },
    changePropertyType(val) {
      if (["coordinate", "array", "image", "file"].includes(val)) {
        this.property.propertyBind = "no_bind";
        this.property.propertyBindDisabled = true;
      } else {
        this.property.propertyBindDisabled = false;
      }
      if (["date", "datetime", "int", "float"].includes(val)) {
        this.property.startRange = "";
        this.property.endRange = "";
        this.property.propertyValue = "";
      }
      // 切换为字符串类型时 如果已经选择了范围约束类型 则重置
      if (val === "text" && this.property.propertyBind === "range") {
        this.property.propertyBind = "no_bind";
      }
    },
    handleUploadChang(file) {
      let type = this.property.propertyType;
      const formData = new FormData();
      formData.append("file", file.raw);
      formData.append("pathType", type);
      this.$axios
        .post(this.$api.knowledgeMap.uploadRelationPropertyFile, formData)
        .then((res) => {
          if (res.status == 200) {
            // debugger;
            this.property.fileName = res.data.fileName;
            this.property.propertyValue = res.data.fileUrl;
            this.$message.success("上传成功");
            this.$forceUpdate();
          }
        });
    },
    handleExceed(file) {
      this.$nextTick(() => {
        this.$refs.uploadRef.clearFiles();
      });
      this.handleUploadChang(file[0]);
    },

    formatCheck(value) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(value)) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
      }
    },
    validConfidence(val) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(val)) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    relationName: {
      handler: function (val) {
        if (val) {
          this.edgeData.name = val;
        }
      },
      immediate: true,
    },
    newEdgeOfG6: {
      handler: function (val) {
        console.log(
          "%c [ val ]-1321",
          "font-size:13px; background:pink; color:#bf2c9f;",
          val
        );
        let { sourceName, targetName } = val;
        this.sourceName = sourceName;
        this.targetName = targetName;
      },
      deep: true,
      immediate: true,
    },
    drawerTypeOfEdge: {
      handler: function (val) {
        if (val === "add") {
          this.edgeData.name = "";
          this.direction = "one-way";
        }
      },
      immediate: true,
    },
    kgEntityRelationSpoId: {
      handler: async function (val) {
        console.log("fdfdartertera", val, this.currentEdge);
        if (val) {
          this.isView = true;
          await this.listRelationProperty();
          await this.getSourceMap();
          const { sourceOntoId, targetOntoId } = this.currentEdge;
          await this.getPublicRelationList(sourceOntoId, targetOntoId);
        }
        this.tabs = "detail";
      },
    },
    newEdgeOfG6: {
      handler: async function (val) {
        console.log(
          "%c [ val ]-1363",
          "font-size:13px; background:pink; color:#bf2c9f;",
          val
        );
        let {
          sourceName,
          targetName,
          sourceOntoId,
          targetOntoId,
          sourceStatus,
          targetStatus,
        } = val;
        this.relationPro.head = sourceName;
        this.relationPro.tail = targetName;
        this.relationPro.sourceStatus = sourceStatus;
        this.relationPro.targetStatus = targetStatus;
        this.relationPro.edge = "";
        this.tableList = [];
        this.relationSourceSize = 0;
        this.relationSourceList = [];
        this.tabs = "detail";
        this.addIsEdit = false;
        if (sourceOntoId && targetOntoId) {
          await this.getPublicRelationList(sourceOntoId, targetOntoId);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../assets/scss/scroll";

.entity-view-component {
  width: 424px;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .view-detail,
  .view-select,
  .view-config {
    height: calc(100% - 60px);
    padding: 0;
    font-size: 14px;
    box-sizing: border-box;

    .name {
      font-weight: bold;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      span {
        margin-right: 10px;
      }

      .haddle {
        color: $--color-primary;
        cursor: context-menu;
      }

      .name-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }

      .name-remark {
        margin-bottom: 10px;
      }
    }

    .name-edit {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .name-edit-input {
        width: 200px;
        margin-right: 10px;

        /deep/ .el-input__inner {
          height: 30px;
        }
      }
    }

    .confidence-edit {
      span {
        margin-right: 24px;
      }

      .confidence-edit-input {
        width: 200px;
        margin-right: 10px;

        /deep/ .el-input__inner {
          height: 30px;
        }
      }
    }

    .confidence {
      /deep/ .el-input__inner {
        height: 32px;
        line-height: 32px;
        box-shadow: none;
        border-radius: 2px;
      }
    }

    .details-edit {
      display: flex;
      justify-content: space-between;

      span {
        width: 86px;
      }
    }

    .content-remark {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .remark-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 10px;
      }

      .remark {
        width: 80px;
        margin-right: 12px;

        /deep/ .el-input__inner {
          height: 30px;
        }
      }

      .add-remark {
        margin-bottom: 10px;
      }
    }

    .type,
    .confidence,
    .picture {
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }

      .title {
        margin-bottom: 16px;
      }
    }

    .type-edit {
      .el-cascader {
        width: 200px;

        /deep/ .el-input__inner {
          height: 30px;
        }
      }
    }

    .picture {
      height: 150px;
      text-align: left;
      position: relative;

      .title {
        margin-bottom: 10px;
      }

      .reupload {
        position: absolute;
        bottom: 0px;
        left: 120px;
      }

      /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        // overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }

      .avatar {
        width: 100px;
        height: 100px;
        display: block;
      }
    }

    .details {
      margin-bottom: 10px;

      .descri {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .all {
        font-size: 12px;
        color: $--color-primary;
        cursor: context-menu;
      }
    }

    .property {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }

  .view-detail {
    padding: 0;
  }

  .table {
    /deep/ .cell {
      text-align: center;
    }

    /deep/ th {
      border: 1px solid #ebeef5;
    }

    /deep/ td {
      border: 1px solid #ebeef5;
    }

    /deep/ .el-table__cell {
      padding: 0;
      height: 36px;
    }
  }
}

.node-edit {
  position: relative;
  height: calc(100% - 96px);
  padding: 16px;
  margin-bottom: 16px;

  .node-form {
    margin-bottom: 16px;

    /deep/ .el-form-item__error {
      margin-left: 85px;
    }

    text-align: left;

    .default-name {
      width: 200px;

      /deep/ .el-input__inner {
        border: 1px solid #dcdfe6;
      }
    }

    .edit-status {
      /deep/ .el-input__inner {
        background: #f3f4f8;
        border: 1px solid #dcdfe6;
      }
    }

    .relation-box {
      display: flex;
      justify-content: space-around;
      align-items: center;

      /deep/ .el-input__inner {
        height: 32px;
        line-height: 32px;
        box-shadow: none;
        border-radius: 2px;
      }
    }

    .arrow {
      width: 30px;
      text-align: center;
    }

    /deep/ .el-form-item__content {
      height: 32px;
      line-height: 32px;
    }

    /deep/ .el-form-item__label {
      height: 32px;
      line-height: 32px;
      color: #999;
      margin-right: -10px;
    }
  }

  .node-form-name {
    /deep/ .el-input__inner {
      height: 32px;
      border-radius: 2px;
      box-shadow: none;
    }
  }

  .upload-img {
    height: 150px;
    text-align: left;
    position: relative;

    .title {
      margin-bottom: 10px;
    }

    .reupload {
      position: absolute;
      bottom: 0px;
      left: 120px;
    }

    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      // overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .property-box {
    .property-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      height: 50px;
    }
  }

  .submit-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0;
    top: 10px;
    color: $--color-primary;
    cursor: context-menu;

    .submit-btn-item {
      span {
        margin-right: 6px;
      }
    }
  }
}

/deep/ .el-dialog {
  width: 500px;
  border-radius: 5px;
}

.table {
  /deep/ .cell {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /deep/ th {
    border: 1px solid #ebeef5;
  }

  /deep/ td {
    border: 1px solid #ebeef5;
  }

  /deep/ .el-table__cell {
    padding: 0;
  }
}

.source {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .source_title {
    font-weight: bold;
  }

  .file_name {
    flex-grow: 9;
  }

  .operation {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;

    .download {
      color: #3a58b9;
    }

    .download:hover {
      cursor: pointer;
    }
  }
}

.btn {
  height: 32px;
  background: #4b71eb;
  border-radius: 2px;
  border: 1px solid #4b71eb;
  line-height: 32px;
  text-align: center;
  cursor: context-menu;
  margin: 0 16px 16px 16px;
  box-sizing: border-box;
  color: #ffffff;
}

.btn-edit {
  background: #ffffff;
  color: #4b71eb;
}

.map-dialog {
  .form-select {
    width: 100%;
  }

  .form-link {
    line-height: initial;
  }

  /deep/ .el-dialog__header {
    border-bottom: 1px solid #e5e6e9;
  }

  /deep/ .el-dialog__body {
    padding-bottom: 0;
  }
}

.common-dialog {
  /deep/ .el-dialog {
    border-radius: 4px;
  }

  /deep/ .el-dialog__header {
    padding: 20px;
    padding-left: 32px;
  }

  /deep/ .el-dialog__title {
    font-size: 18px;
    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
    font-weight: bold;
    color: #333333;
  }

  /deep/ .el-dialog__body {
    padding: 42px 60px 0 60px;
  }

  /deep/ .el-input__inner {
    height: 32px;
  }

  /deep/ .el-form-item__label {
    color: #333333;
  }

  /deep/ .el-button {
    width: 68px;
    height: 32px;
    padding: 6px;
    margin-left: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
  }

  /deep/ .el-form-item__content {
    margin-left: 60px;
  }
}
</style>
